<template>
  <div>
    <v-pageTitle vPageName="DEMO,"></v-pageTitle>
    <div class="demoList">
      <!-- 头部操作栏 -->
      <div class="operationTop">
        <div class="textleft">
          <el-button icon="el-icon-document" v-bind:class="{btnColor:listType===1?true:false}" size="small" @click="changeType(1)">列表1</el-button>
          <el-button icon="el-icon-document" v-bind:class="{btnColor:listType===2?true:false}" size="small" @click="changeType(2)">列表2</el-button>
          <el-button icon="el-icon-document" v-bind:class="{btnColor:listType===3?true:false}" size="small" @click="changeType(3)">列表3</el-button>
        </div>
        <div class="textRight">
          <el-button type="primary" icon="el-icon-refresh" size="small" @click="refresh()">刷新</el-button>
        </div>
      </div>
      <!-- 数据区域 -->
      <div class="operationTable table">
        <el-table v-loading="tabelLoading" :element-loading-text="tabelLoadingText" border :data="demoData" style="width: 100%" height="700" @selection-change="multipleSelection">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="时间">
            <template slot-scope="scope">
              <div v-html="changeTimeStamp(scope.row.time)"></div>
            </template>
          </el-table-column>
          <el-table-column prop="msg1" label="信息1">
          </el-table-column>
          <el-table-column prop="msg2" label="信息2">
          </el-table-column>
          <el-table-column prop="msg3" label="信息3">
          </el-table-column>
          <el-table-column prop="msg4" label="信息4">
          </el-table-column>
          <el-table-column prop="msg5" label="信息5">
          </el-table-column>
          <el-table-column prop="msg6" label="信息6">
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" class="resetBtn" @click="demoDetail(scope.row)">详情</el-button>
              <el-button type="text" class="resetBtn del" @click="demoDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部操作栏 -->
      <div class="operationBottom">
        <div class="btn">
          <el-button type="success" icon="el-icon-check" size="small">提交</el-button>
          <el-button type="danger" icon="el-icon-close" size="small">删除</el-button>
        </div>
        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vPageTitle from "../common/PageTitle";
import commonFun from "../../assets/js/commonFun";
export default {
  name: "demoList",
  components: {
    vPageTitle
  },
  data() {
    return {
      // 表格数据加载
      tabelLoading: false,
      tabelLoadingText: "数据加载中...",
      // 表格内的数据
      demoData: [
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        },
        {
          time: "1542857769000",
          msg1: "信息1",
          msg2: "信息2",
          msg3: "信息3",
          msg4: "信息4",
          msg5: "信息5",
          msg6: "信息6"
        }
      ],
      multipleSelection: [],
      // 分页数据
      total: 1,
      pageNum: 1,
      pageSize: 10,

      // 列表状态(列表1,2,3)
      listType: 1
    };
  },
  created() {},
  methods: {
    // 选择每页的条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDemoList();
    },
    // 前往第几页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getDemoList();
    },
    // 刷新
    refresh() {
      this.getDemoList();
    },
    // 获取不同类别的数据
    changeType(type) {
      this.listType = type;
      this.getDemoList();
    },
    // 转化时间戳
    changeTimeStamp(timeStamp) {
      if (timeStamp) {
        let timeStr = commonFun.changDateType(timeStamp);
        return `<span>${timeStr}</span>`;
      }
    },
    // 获取数据
    getDemoList(type = this.listType, pageNum = this.pageNum, pageSize = this.pageSize) {
      console.log({
        type: type,
        pageNum: pageNum,
        pageSize: pageSize
      });
    },
    // 详情
    demoDetail() {},
    // 删除
    demoDel() {}
  }
};
</script>
<style lang="less" scoped>
.demoList {
  .table {
    margin-top: 55px;
  }
}
</style>
